import React, {PureComponent} from 'react';
import {InputComp} from 'jh-lib';
import {UserOutlined, InfoCircleOutlined} from '@ant-design/icons';
import {Button, Col, Form, Row, Tooltip} from "antd";

export default class Test extends PureComponent {
    formRef = React.createRef();

    render() {
        return (
            <div>
                {/*<h3>前缀后缀</h3>*/}
                <Form component={false} ref={this.formRef}
                      validateMessages={{
                          required: "'${name}' 是必选字段",
                      }}
                      onValuesChange={(changedValues, allValues) => {
                          console.log('changedValues, allValues', changedValues, allValues)
                      }}>
                    <div className={'demo-contain'}>
                        <Row gutter={[16, 16]}>
                            <Col span={12} style={{height: 100}}>
                                <InputComp style={{height: '100%'}}
                                           compProps={{disabled: true}}
                                           labelWidth={90}
                                           defaultValue={'asdf'}
                                           fieldName={'f1'}
                                           compLabel={'f1标签'}/>
                            </Col>
                            <Col span={12}>
                                <InputComp fieldName={'f2'} compLabel={'f2'} value={'sss'}/>
                            </Col>
                            <Col span={12}>
                                <InputComp compLabel={'value'} value={'value'}/>
                            </Col>
                            <Col span={12}>
                                <InputComp compLabel={'defaultValue'} defaultValue={'defaultValue'}/>
                            </Col>
                        </Row>
                        <Row>
                            <Button onClick={() => {
                                this.formRef.current.validateFields().then(value => {

                                })
                                console.log('this.formRef.current.getFieldsValue()', this.formRef.current.getFieldsValue())
                            }}>提交</Button>
                        </Row>
                        <Row gutter={[16, 16]}>
                            <Col span={12}>
                                <InputComp
                                    value={'asdfsadfsdf'}
                                    placeholder="前缀和后缀图标"
                                    prefix={<UserOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                                    style={{width: '400px'}}
                                    suffix={
                                        <Tooltip title="Extra information">
                                            <InfoCircleOutlined style={{color: 'rgba(0,0,0,.45)'}}/>
                                        </Tooltip>
                                    }
                                />
                            </Col>
                            <Col span={12}>
                                <InputComp style={{width: '400px'}} addonAfter={'后置'} addonBefore={'前置'}
                                           placeholder={'最大长度5'}
                                           maxLength={5}/>
                            </Col>
                            <Col span={12}>
                                <InputComp style={{width: '400px'}} compLabel={'姓名'} placeholder={'左侧含标签描述'}/>
                            </Col>
                            <Col span={12}>
                                <InputComp allowClear={true} placeholder={'allowClear属性；请先输入内容'}/>
                            </Col>
                            <Col span={12}>
                                {/*<Form component={'div'}>*/}
                                <InputComp password={true} compLabel={'密码'} placeholder={'请输入'}/>
                                {/*</Form>*/}
                            </Col>
                        </Row>
                    </div>
                </Form>
            </div>
        )
    }
}